<script setup>
import { onMounted, ref } from "vue";
import request from "@/common/utils/request";
import store from "@/store/index";
import { computed } from "vue";
import { WindowsOutlined, AppleOutlined } from '@ant-design/icons-vue'
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
});

const appName = ref('');



const emit = defineEmits(["update:visible", "logined"]);
const appPath = import.meta.env.VITE_APP_SHORT_NAME;
const appVersion = import.meta.env.VITE_APP_VERSION;

const aiConfig = computed(() => {
    return store.state.user.aiConfig || {};
})

onMounted(() => {
    store.dispatch("getAiConfig");
    storeAi.dispatch("getAiConfig").then((aiConfig) => {
        appName.value = aiConfig.site_name
    })
})

</script>

<template>
    <div class="Downloadpage">
        <h2 class="router-title">下载{{ appName }}客户端 <span style="font-size:10px;color:#999;">v{{appVersion}}</span></h2>
        <div class="container">
            <div class="download_content">
                <div class="title"> 同时支持 Windows、macOS 版本</div>
                <div class="desc">Windows 版本 默认仅支持 Windows 10+</div>
                <div class="action">
                    <div class="action-item">
                        <a download=""
                            :href="`${aiConfig?.shotack_desktop_path}/${appPath}-${appVersion}-setup.exe?version=${appVersion}`"
                            target="_blank">
                            <a-button type="primary" shape="round"
                                style="width: 441px;font-size: 30px;height: 70px;background: linear-gradient(to right, #2b84ff, #4faeff, #00c5ff);border-color: transparent;">

                                <span style="display: flex;align-items: center;justify-content: center;">
                                    <img src="./images/icon_win.png" style="width: 30px;margin-right: 5px;" alt="">
                                    <span style="font-weight: 600;">
                                        Windows 客户端下载
                                    </span>
                                </span>

                            </a-button>
                        </a>
                    </div>
                    <div class="action-item">
                        <a download=""
                            :href="`${aiConfig?.shotack_desktop_path}/${appPath}-${appVersion}.dmg?version=${appVersion}`"
                            target="_blank">
                            <a-button type="primary" shape="round"
                                style="width:441px;height: 70px;font-size: 30px;background: linear-gradient(to right, #2b84ff, #4faeff, #00c5ff);border-color: transparent;">


                                <span style="display: flex;align-items: center;justify-content: center;">
                                    <img src="./images/icon_mac.png" style="height: 30px;margin-right: 5px;" alt="">
                                    <span style="font-weight: 600;">macOS 客户端下载</span>
                                </span>

                            </a-button>
                        </a>

                    </div>
                </div>
            </div>
        </div>

    </div>


</template>

<style lang="less" scoped>
.Downloadpage {
    padding: 14px;
    background: url(./images/acount_center.png) no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;

    .router-title {
        color: #162d5b;
        font-size: 16px;
        font-weight: 600;
    }

    .container {
        width: 100%;
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: orange;

        .download_content {
            width: 100%;
            // background-color: pink;
            height: 600px;

            .title {
                font-weight: 600;
                font-size: 75px;
                text-align: center;
                font-family: PingFang SC;
            }

            .desc {
                margin-top: 30px;
                text-align: center;
                font-size: 42px;
                font-family: Hiragino Sans GB;
            }

            .action {
                margin-top: 100px;
                text-align: center;

                .action-item {
                    margin-top: 40px;
                }
            }
        }

    }

}
</style>